<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git Reset 命令完全指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 8px;
            position: relative;
        }
        .code-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #6e8efb, #a777e3);
            border-radius: 8px 0 0 8px;
        }
        .mode-card {
            border-left: 4px solid;
            transition: all 0.3s ease;
        }
        .mode-card:hover {
            transform: translateX(5px);
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col items-center text-center">
                <h1 class="serif text-4xl md:text-5xl font-bold mb-6 leading-tight">
                    Git Reset 命令完全指南
                </h1>
                <p class="text-xl max-w-2xl opacity-90 mb-8">
                    掌握撤销更改和重写历史的核心工具
                </p>
                <div class="flex space-x-2">
                    <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">Git</span>
                    <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">版本控制</span>
                    <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">开发者工具</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <p class="text-lg text-gray-700 mb-6">
                        <span class="serif text-4xl float-left mr-3 -mt-1">G</span>
                        <span class="font-medium">it reset</span> 命令是 Git 中一个非常强大的工具，用于撤销对工作目录和索引（暂存区）的更改，或改变当前分支的状态。这个命令可以用来修改最近的提交记录，回滚到先前的提交，或撤销尚未提交的更改。根据使用的选项不同，<code class="bg-gray-100 px-1 rounded">git reset</code> 可以有不同的效果。
                    </p>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1 mr-3">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <div>
                                <p class="text-blue-800">
                                    <span class="font-semibold">注意：</span> <code class="bg-blue-100 px-1 rounded">git reset</code> 是一个危险命令，因为它会重写提交历史。在共享分支上使用时需要特别小心。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="mb-16">
            <h2 class="serif text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-cogs mr-3 text-purple-500"></i>
                Git Reset 的功能
            </h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="text-purple-500 text-3xl mb-4">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">修改暂存区的内容</h3>
                    <p class="text-gray-600">使暂存区的内容与某个指定的提交一致，同时保持工作目录中的文件不变。</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="text-purple-500 text-3xl mb-4">
                        <i class="fas fa-file-code"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">修改工作目录和暂存区</h3>
                    <p class="text-gray-600">使工作目录和暂存区的内容与某个指定的提交一致。</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="text-purple-500 text-3xl mb-4">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">更改当前分支的提交历史</h3>
                    <p class="text-gray-600">将当前分支的指针移动到指定的提交。</p>
                </div>
            </div>
        </section>

        <!-- Mermaid Diagram -->
        <section class="mb-16">
            <h2 class="serif text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-project-diagram mr-3 text-purple-500"></i>
                Git Reset 工作原理
            </h2>
            <div class="bg-white rounded-xl p-6 shadow-md">
                <div class="mermaid">
                    graph TD
                        A[当前提交] --> B[新提交]
                        B --> C[工作目录]
                        B --> D[暂存区]
                        B --> E[HEAD]
                        style A fill:#a777e3,color:white
                        style B fill:#6e8efb,color:white
                        style C fill:#f8f9fa
                        style D fill:#f8f9fa
                        style E fill:#f8f9fa
                </div>
            </div>
        </section>

        <!-- Usage Section -->
        <section class="mb-16">
            <h2 class="serif text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-terminal mr-3 text-purple-500"></i>
                Git Reset 的使用方式
            </h2>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover mb-8">
                <div class="p-6 md:p-8">
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">基本语法</h3>
                    <div class="code-block p-5 mb-6">
                        <code class="block overflow-x-auto">
                            git reset [&lt;mode&gt;] [&lt;commit&gt;]
                        </code>
                    </div>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">参数说明</h4>
                            <ul class="list-disc pl-5 text-gray-600">
                                <li class="mb-2"><code class="bg-gray-100 px-1 rounded">&lt;mode&gt;</code>: 可选的操作模式</li>
                                <li><code class="bg-gray-100 px-1 rounded">&lt;commit&gt;</code>: 指定的提交（哈希值或引用）</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">常见引用</h4>
                            <ul class="list-disc pl-5 text-gray-600">
                                <li class="mb-2"><code class="bg-gray-100 px-1 rounded">HEAD</code>: 当前提交</li>
                                <li><code class="bg-gray-100 px-1 rounded">HEAD~1</code>: 前一个提交</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Modes Section -->
        <section class="mb-16">
            <h2 class="serif text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-sliders-h mr-3 text-purple-500"></i>
                Git Reset 的模式
            </h2>
            <div class="space-y-6">
                <!-- Soft Mode -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden mode-card border-l-purple-400 card-hover">
                    <div class="p-6 md:p-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-feather-alt text-xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">--soft 模式</h3>
                        </div>
                        <div class="code-block p-5 mb-4">
                            <code class="block overflow-x-auto">
                                git reset --soft &lt;commit&gt;
                            </code>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                            <p class="text-gray-600">仅仅移动 HEAD 指针到 <code class="bg-gray-100 px-1 rounded">&lt;commit&gt;</code>，保留暂存区和工作目录中的更改。这样，所有被重置的提交会被放到暂存区中，允许你重新提交。</p>
                            <p class="text-gray-600 mt-2">用于在最近的提交中添加更多的更改，或者重新提交一些更改而不丢失当前工作。</p>
                        </div>
                        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 text-blue-500 mt-1 mr-3">
                                    <i class="fas fa-lightbulb"></i>
                                </div>
                                <div>
                                    <p class="text-blue-800">
                                        <span class="font-semibold">使用技巧：</span> 当你想要修改最近提交的提交信息或添加忘记的文件时，<code class="bg-blue-100 px-1 rounded">git reset --soft HEAD~1</code> 非常有用。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mixed Mode -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden mode-card border-l-blue-400 card-hover">
                    <div class="p-6 md:p-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-adjust text-xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">--mixed 模式 (默认模式)</h3>
                        </div>
                        <div class="code-block p-5 mb-4">
                            <code class="block overflow-x-auto">
                                git reset --mixed &lt;commit&gt;<br>
                                # 或<br>
                                git reset &lt;commit&gt;
                            </code>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                            <p class="text-gray-600">移动 HEAD 指针到 <code class="bg-gray-100 px-1 rounded">&lt;commit&gt;</code>，并将暂存区的内容重置为这个提交的内容，但不更改工作目录中的文件。工作目录中的更改将保留在未暂存状态中。</p>
                            <p class="text-gray-600 mt-2">用于撤销暂存区中的更改，但保留工作目录中的更改，以便重新选择要提交的更改。</p>
                        </div>
                        <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 text-yellow-500 mt-1 mr-3">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div>
                                    <p class="text-yellow-800">
                                        <span class="font-semibold">注意：</span> 这是最常用的 reset 模式，当你不指定模式时，Git 会默认使用 <code class="bg-yellow-100 px-1 rounded">--mixed</code> 模式。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hard Mode -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden mode-card border-l-red-400 card-hover">
                    <div class="p-6 md:p-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-red-100 text-red-800 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                                <i class="fas fa-exclamation-triangle text-xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">--hard 模式</h3>
                        </div>
                        <div class="code-block p-5 mb-4">
                            <code class="block overflow-x-auto">
                                git reset --hard &lt;commit&gt;
                            </code>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-medium text-gray-700 mb-2">适用场景</h4>
                            <p class="text-gray-600">移动 HEAD 指针到 <code class="bg-gray-100 px-1 rounded">&lt;commit&gt;</code>，并将暂存区和工作目录中的内容都重置为这个提交的内容。所有在此之后的更改将被丢弃。</p>
                            <p class="text-gray-600 mt-2">用于完全撤销所有自指定提交以来的更改，包括工作目录中的更改，恢复到指定提交的状态。</p>
                        </div>
                        <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 text-red-500 mt-1 mr-3">
                                    <i class="fas fa-skull-crossbones"></i>
                                </div>
                                <div>
                                    <p class="text-red-800">
                                        <span class="font-semibold">警告：</span> 使用此模式会丢失所有在该提交之后的未提交更改，且无法恢复！请确保你真的不需要这些更改。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Examples Section -->
        <section class="mb-16">
            <h2 class="serif text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-code mr-3 text-purple-500"></i>
                使用示例
            </h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6 md:p-8">
                        <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-undo-alt text-purple-500 mr-3"></i>
                            撤销最近的提交，但保留更改
                        </h3>
                        <div class="code-block p-5 mb-4">
                            <code class="block overflow-x-auto">
                                git reset --soft HEAD~1
                            </code>
                        </div>
                        <p class="text-gray-600">
                            将当前分支回退到前一个提交，同时保留暂存区和工作目录中的更改。
                        </p>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6 md:p-8">
                        <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-eraser text-blue-500 mr-3"></i>
                            撤销最近的提交，保留更改为未暂存状态
                        </h3>
                        <div class="code-block p-5 mb-4">
                            <code class="block overflow-x-auto">
                                git reset HEAD~1
                            </code>
                        </div>
                        <p class="text-gray-600">
                            将当前分支回退到前一个提交，同时将更改从暂存区移除，但保留在工作目录中。
                        </p>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6 md:p-8">
                        <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-bomb text-red-500 mr-3"></i>
                            彻底撤销最近的提交和更改
                        </h3>
                        <div class="code-block p-5 mb-4">
                            <code class="block overflow-x-auto">
                                git reset --hard HEAD~1
                            </code>
                        </div>
                        <p class="text-gray-600">
                            将当前分支回退到前一个提交，同时丢弃所有自该提交以来的更改，包括暂存区和工作目录中的更改。
                        </p>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="p-6 md:p-8">
                        <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-exchange-alt text-green-500 mr-3"></i>
                            与 git revert 的比较
                        </h3>
                        <div class="code-block p-5 mb-4">
                            <code class="block overflow-x-auto">
                                git revert HEAD
                            </code>
                        </div>
                        <p class="text-gray-600">
                            <code class="bg-gray-100 px-1 rounded">git reset</code> 会重写历史，而 <code class="bg-gray-100 px-1 rounded">git revert</code> 会创建一个新的提交来撤销特定提交，不会影响提交历史。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Comparison Table -->
        <section class="mb-16">
            <h2 class="serif text-3xl font-bold mb-8 text-gray-800 flex items-center">
                <i class="fas fa-table mr-3 text-purple-500"></i>
                Git Reset 模式比较
            </h2>
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模式</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HEAD 指针</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">暂存区</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工作目录</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">危险等级</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">--soft</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">移动</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">保留更改</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">保留更改</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">低</span></td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">--mixed</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">移动</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">重置</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">保留更改</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">中</span></td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">--hard</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">移动</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">重置</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">重置</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">高</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- Final Notes -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-8">
                    <h2 class="serif text-3xl font-bold mb-6 text-gray-800">注意事项</h2>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-red-500 mt-1 mr-3">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div>
                                <p class="text-gray-700"><span class="font-semibold">数据丢失：</span> 使用 <code class="bg-gray-100 px-1 rounded">--hard</code> 模式时，会丢失所有在该提交之后的未提交更改，务必小心使用。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-blue-500 mt-1 mr-3">
                                <i class="fas fa-random"></i>
                            </div>
                            <div>
                                <p class="text-gray-700"><span class="font-semibold">与 git revert 的比较：</span> <code class="bg-gray-100 px-1 rounded">git reset</code> 会重写历史，而 <code class="bg-gray-100 px-1 rounded">git revert</code> 会创建一个新的提交来撤销特定提交，不会影响提交历史。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-purple-500 mt-1 mr-3">
                                <i class="fas fa-users"></i>
                            </div>
                            <div>
                                <p class="text-gray-700"><span class="font-semibold">共享分支：</span> 避免在共享分支上使用 <code class="bg-gray-100 px-1 rounded">git reset</code>，因为它会重写历史，可能导致团队协作问题。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-green-500 mt-1 mr-3">
                                <i class="fas fa-life-ring"></i>
                            </div>
                            <div>
                                <p class="text-gray-700"><span class="font-semibold">恢复方法：</span> 如果不小心使用了错误的 reset，可以使用 <code class="bg-gray-100 px-1 rounded">git reflog</code> 找到之前的提交并恢复。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-10">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-xl font-semibold">技术小馆</p>
                    <p class="text-gray-400">分享技术知识与最佳实践</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition duration-300 flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Mermaid Initialization -->
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>